import React, { Component } from 'react';
import { 
  Container, Row, Col,Navbar,NavbarBrand,
  Toast, ToastHeader, ToastBody } from 'reactstrap';
import { Video } from './Video';
import { Chart } from './Chart';
import { ToastStatus } from './ToastStatus';
import { ToastSensor } from './ToastSensor';

export class Layout extends Component {
  static displayName = Layout.name;
  
  constructor(props){
    super(props);
    this.video = React.createRef();
    this.video_infra = React.createRef();
    this.chart = React.createRef();
    this.state = {
      video:this.video,
      video_infra:this.video_infra,
      chart:this.chart
    };
  }
  componentDidMount() {
    this.setState({
      video:this.video.current,
      video_infra:this.video_infra.current,
      chart:this.chart.current
    });

    let that = this;
    window.onmessage=function(evt){
      if(evt.data.obj===that.video.current.buf){
        that.video.current.image_data.push(evt.data);
      }
      else if(evt.data.obj===that.video_infra.current.buf){
        that.video_infra.current.image_data.push(evt.data);
      }
    }
  }
  render () {
    return (
      <div>
        <Container fluid={true}>
          <Row>
            {/* <Col md={1}>
              <Row>
                <Toast>
                  <ToastHeader>视频</ToastHeader>
                  <ToastBody style={{height:window.innerHeight/2.3}}></ToastBody>
                </Toast>
              </Row>
              <Row>
                <Toast>
                  <ToastHeader>红外</ToastHeader>
                  <ToastBody style={{height:window.innerHeight/2.3}}></ToastBody>
                </Toast>
              </Row>
            </Col> */}
            <Col md={9}>
              <Row>
                <Navbar>
                  <NavbarBrand>北京鼎汉检测技术有限公司</NavbarBrand>
                </Navbar>
              </Row>
              <Row>
                <Col md={7}>
                  <Video ref={this.video}/>
                </Col>
                <Col md={5}>
                  <Video ref={this.video_infra}/>
                </Col>
              </Row>
              <Row>
                <Chart ref={this.chart}/>
              </Row>
            </Col>
            <Col md={3}>
              <Row>
                <Toast>
                  <ToastHeader>状态</ToastHeader>
                  <ToastBody style={{height:window.innerHeight/2.22,padding:0}}>
                    <ToastStatus video_infra={this.state.video_infra} video={this.state.video} chart={this.state.chart}/>
                  </ToastBody>
                </Toast>
              </Row>
              <Row>
                <Toast>
                  <ToastHeader>传感器</ToastHeader>
                  <ToastBody style={{height:window.innerHeight/2.22,padding:0}}>
                    <ToastSensor data={["红外1","视频2","红外1","视频2"]}/>
                  </ToastBody>
                </Toast>
              </Row>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}
